Thank you for purchasing our product. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
ListingGEO - A Material Design Bootstrap 4 Admin Dashboard Template, is Responsive & Powerful Clean UI Admin Panel Template. It can be used as a Backend Dashboard Template for every types of Web Application like Custom Website, Custom CMS, CRM, ERP or any other Backend Application & Software.
ListingGEO is light-weight & better user-friendly Admin Template. It has lots of UI Components & huge collection of plugins which makes this better user-experience & easy to use. We put a lot of love and effort to make ListingGEO useful tool for everyone. This Admin Template gives you next label of satisfaction in functionality and features for functional clean Admin Panel.
ListingGEO is Responsive Material Designed Admin Template. It is Multi-Device supported & Cross Browser Compatible. Well Documented.
This Documentation provide you a clear guideline for how to use and customize template. If you facing any problem, please don't forget to ask any question or contact with us for support. Thank You for Purchasing our Product.
assets images scss css js . . . HTML Page Templates
>assests (Contains sub-folders) >css (Contains all vendor css stylesheet Files) >file-upload (Temporary directory which is for development) >fonts (Contains all fonts like text font, icon fonts) >images (Contains image icon which is used by css Files) >img (Contains image icon) >js (All Vendor Javascript Files) >css(Contains all custom css stylesheet Files) >js(All Custom Javascript Files) >images (Contains sub-folders and image files used by template) >scss (Contains SASS Files)
All the HTML codes and section are well seprated by linespace and comments so that you can modify easily. As example here below is the sample codes for team section:
<div class="apps-header navbar">
<div class="apps-logo-block">
<a href="index.html">
<img src="images/logo.png" alt="img" class="img-responsive">
<div class="logo-text-block">
<h3 class="logo-text">ListingGEO</h3>
</div>
</a>
</div>
<div class="top-menu">
<ul class="top-controller-icons pull-left">
<li>
<a id="showLeftPush" href="javascript:void(0)" class="toggolebtn">
<span class="ti-view-grid"></span>
</a>
</li>
<li>
<form class="searchbox">
<input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp();" required>
<input type="submit" class="searchbox-submit" value="">
<span class="searchbox-icon ti-search"></span>
</form>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="images/misc/lan1.png" alt="img">
English
<span class="ti-angle-down"></span>
<div class="ripple-container"></div>
</a>
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0)">
<img src="images/misc/lan4.png" alt="img">
UK
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="images/misc/lan2.png" alt="img">
German
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="images/misc/lan3.png" alt="img">
Italy
</a>
</li>
</ul>
</li>
<li class="dropdown icon-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<span class="badge badge-default warning-two-bg">8</span>
<div class="ripple-container"></div>
</a>
<ul class="dropdown-menu card-dropdown left">
<li><div class="drop-title">You have 4 new messages</div></li>
<li>
<div class="card-inner-block">
<a href="javascript:void(0)">
<div class="user-img">
<img src="images/misc/avatar1.jpg" alt="user">
<span class="profile-status"></span>
</div>
<div class="mail-contnet">
<h5>Steven Smith</h5>
<span class="mail-desc">Congratulation you win th</span>
<span class="time">9:30 AM</span>
</div>
</a>
<a href="javascript:void(0)">
<div class="user-img">
<img src="images/misc/avatar2.jpg" alt="user" class="img-circle">
<span class="profile-status"></span>
</div>
<div class="mail-contnet">
<h5>Robart John</h5>
<span class="mail-desc">Hello! sir,we are glade to</span>
<span class="time">9:30 AM</span>
</div>
</a>
<a href="javascript:void(0)">
<div class="user-img">
<img src="images/misc/avatar2.jpg" alt="user" class="img-circle">
<span class="profile-status"></span>
</div>
<div class="mail-contnet">
<h5>Mike Danny</h5>
<span class="mail-desc">There is no marcy form th</span>
<span class="time">9:30 AM</span>
</div>
</a>
<a href="javascript:void(0)">
<div class="user-img">
<img src="images/misc/avatar1.jpg" alt="user">
<span class="profile-status"></span>
</div>
<div class="mail-contnet">
<h5>Steven Smith</h5>
<span class="mail-desc">Congratulation you win th</span>
<span class="time">9:30 AM</span>
</div>
</a>
</div>
</li>
<li><div class="drop-footer"><a href="inbox.html">Check all mail</a></div></li>
</ul>
</li>
<li class="dropdown icon-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="badge badge-default primary-bg">7</span>
<i class="fa fa-bell-o" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu card-dropdown right">
<li><div class="drop-title">Notification</div></li>
<li>
<div class="card-inner-block notification-block">
<a href="javascript:void(0)">
<i class="notification-icon fa fa-clock-o info-bg"></i>
<div class="notification-details">
<h5>Events</h5>
<span class="mail-desc">Todayes 5 events still Remaning</span>
<span class="time">9:30 AM</span>
</div>
<span class="time"></span>
</a>
<a href="javascript:void(0)">
<i class="notification-icon fa fa-users primary-bg"></i>
<div class="notification-details">
<h5>Meetings</h5>
<span class="mail-desc">Todayes Meeting were cancle</span>
<span class="time">10:30 AM</span>
</div>
<span class="time"></span>
</a>
<a href="javascript:void(0)">
<i class="notification-icon fa fa-plane warning-two-bg"></i>
<div class="notification-details">
<h5>Travel</h5>
<span class="mail-desc">US Airline Departure time</span>
<span class="time">5:30 PM</span>
</div>
<span class="time"></span>
</a>
<a href="javascript:void(0)">
<i class="notification-icon fa fa-pie-chart warning-bg"></i>
<div class="notification-details">
<h5>Revenue</h5>
<span class="mail-desc">Todayes Revenue Cross 2 crore</span>
<span class="time">11:20 PM</span>
</div>
<span class="time"></span>
</a>
</div>
</li>
<li><div class="drop-footer"><a href="inbox.html">Check all notification</a></div></li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"></div>
</div><!-- apps-header -->
You just need to copy one of them, which one you needed for your site to build.
All styles files are seperated on css folders on the assets folder having all the external CSS plugins and Custom CSS
All Custom Styles are written into app.css file and responsive layout is written into responsive.css file
app.css files codelines are decorated on such level:
/* |---------------------------------------------------------------------------- | CSS INDEX |---------------------------------------------------------------------------- 1. General Style 2. Apps Common Style 3. Header Style 4. Breadcrumb Style 5. Activity Style 6. Weather Style 7. Event-callender Style 8. Chats Style 9. Alert Style 10. Buttons Style 11. Pagination Style 12. Progress-bar Style 13. Chart Style 14. Basic-table Style 15. Data-table Style 16. Google-map Style 17. Vector-map Style 18. Profile Style 19. Form-elements Style 20. Form-validations Style 21. Tree-view Style 22. Tab Style 23. Inbox Style 24. Mail-view Style 25. Mail-compose Style */
Our css rules are seperated beautifully for each section. So it's easy to customize. Such as, If you want to change the style of Chart JS section and you are not familiar with sass than simply go to Chart Style section and change the styles as your want:
/*
|----------------------------------------------------------------------------
| 13. Chart Style
|----------------------------------------------------------------------------
*/
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none; }
.chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 3px;
-webkit-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
padding: 4px; }
.chartjs-tooltip-key {
display: inline-block;
width: 10px;
height: 10px; }
This template has following javascript plugins:
all these files are located on assets/js folder.
Like CSS and HTML our JavaScript codes on our custom.js file are also well organized and well commented.
For example if you want to change the functionality of Chats Settings just find the following block of codes and change it according to your need:
/*--------------------------------------------
Chats Settings
---------------------------------------------*/
function initChat() {
var cont = $('#chats');
var list = $('.chats', cont);
var form = $('.chat-form', cont);
var input = $('input', form);
var id = $("#test");
var btn = $('.btn', form);
var imagePath = 'images/misc/';
var handleClick = function (e) {
e.preventDefault();
var text = input.val();
if (text.length == 0) {
return;
}
var time = new Date();
var time_str = (time.getHours() + ':' + time.getMinutes());
var tpl = '';
tpl += '<li class="out">';
tpl += '<div class="message">';
tpl += '<span class="arrow"></span>';
tpl += '<a href="#" class="name">Bob Nilson</a> ';
tpl += '<span class="body">';
tpl += text;
tpl += '</span>';
tpl += '</div>';
tpl += '<div class="avatar-block">';
tpl += '<img class="avatar" alt="" src="' + imagePath + 'avatar1.jpg"/>';
tpl += '<span class="datetime">' + time_str + '</span>';
tpl += '</div>';
tpl += '</li>';
var msg = list.append(tpl);
input.val("");
var getLastPostPos = function () {
var height = 0;
cont.find("li.out, li.in").each(function () {
height = height + $(this).outerHeight();
});
return height;
}
$(".emoji-wysiwyg-editor.form-control").empty();
}
$('body').on('click', '.message .name', function (e) {
e.preventDefault(); // prevent click event
var name = $(this).text(); // get clicked user's full name
input.val('@' + name + ':'); // set it into the input field
scrollTo(input);
});
btn.click(handleClick);
input.keypress(function (e) {
if (e.which == 13) {
handleClick(e);
return false; //<---- Add this line -->
}
});
}
initChat();
/* This css file is to override bootstarp css ********************************************************* / * Theme Name: ListingGEO * Theme URI: http://themeforest.ne/user/codepassenger * Author: CodePassenger * Author URI: http://CodePassenger.com * Description: Bootstrap 4 Admin Template * Version: 1.0.0 * License: GNU General Public License v2 or later * License URI: http://www.gnu.org/licenses/gpl-2.0.html * Tags: admin dashboard,admin template,site template, html5, template *********************************************************** /
We are thankful to...
Once again, thank you so much for purchasing this product. As we said at the beginning, We'd be glad to help you if you have any questions relating to this product. No guarantees, but we'll do our best to assist. If you have a more general question relating to this product on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
CodePassenger Team